<template>
	<view class="wrap">
		<js-error mode="bottom" ref="jsError"></js-error>
		<view class="action bg-white "
			style="padding: 15px 0 0 10px;font-size: 20px;align-items: center;display: flex;">
			<u-icon name="/static/image/invcode.png" size="80"></u-icon>
			<text class="cuIcon-titles text-bold">完善重量信息</text>
		</view>

		<u-form class="form bg-white" :model="model" ref="uForm" label-position="left">
			<u-form-item label="计划发货重量:" prop="planWeight" label-width="240" required
				:label-style="{'font-weight':'bold'}">
				<u-input placeholder="请输入" v-model="model.planWeight" @input="planWeightChange" type="digit" di
					maxlength="64"></u-input>
			</u-form-item>
			<u-form-item label="客户重量:" prop="cusWeight" label-width="240" :label-style="{'font-weight':'bold'}">
				<u-input placeholder="请输入" v-model="model.cusWeight" type="digit" di maxlength="64"></u-input>
			</u-form-item>
			<u-form-item label="出库仓库:" prop="cwhname" label-width="240" :label-style="{'font-weight':'bold'}">
				<u-input placeholder="请输入" v-model="model.cwhname" :disabled="true" type="text" di
					maxlength="64"></u-input>
			</u-form-item>
			<u-form-item label="备注:" prop="remarks" label-width="240" :label-style="{'font-weight':'bold'}">
				<u-input placeholder="请输入" v-model="model.remarks" :disabled="true" type="text" di
					maxlength="64"></u-input>
			</u-form-item>
			<u-form-item label="累计确认重量:" prop="qrWeight" label-width="240" :label-style="{'font-weight':'bold'}">
				<u-input placeholder="请输入" v-model="model.qrWeight" :disabled="true" type="digit" di
					maxlength="64"></u-input>
			</u-form-item>

		</u-form>
		<view class="action bg-white "
			style="font-size: 20px;align-items: center;display: flex;justify-content: space-between;padding: 0 10px 10px 10px;">

			<view style="align-items: center;display: flex;">
				<u-icon name="/static/image/detail.png" size="80"></u-icon>
				<text class="cuIcon-titles text-bold">货位信息</text>
			</view>


			<view @click="GoaddChild()">
				<u-icon name="plus-circle" size="90" color="#3E97B0"></u-icon>
			</view>
		</view>
		<view style="padding: 10px;">
			<view v-for="(item,index) in children" class="cu-item shadow " style="position: relative;" :key="index" v-if="item.status != '1'">
				<view class="cu-form-group" style="display: flex;justify-content: space-between;">
					<view style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;min-width: 40px;text-align: center;font-style: italic;font-weight: bold">
						{{ index + 1 }}
					</view>
					<view class="">
						<text style="font-size: 35px;" class="cuIcon-deletefill text-sl text-red"
							@tap="delDetail(item)"></text>
					</view>
				</view>
				<view class="cu-form-group ">
					<view class="title">确认重量：</view>
					<view style="flex: 1;"> <u-input @input="qrWeightChange($event,item,index)" placeholder="请输入"
							v-model="item.qrWeight" type="digit" di maxlength="200"></u-input></view>
				</view>
				<view class="cu-form-group ">
					<view class="title">发货批次：</view>
					<view style="flex: 1;"> <u-input placeholder="请输入" v-model="item.ibatch" :disabled="true"
							type="text" di maxlength="200"></u-input></view>
				</view>
				<view class="cu-form-group ">
					<view class="title">发货货位：</view>
					<view style="flex: 1;"> <u-input placeholder="请输入" @click="hwxz(item,index)"
							v-model="item.cposition" :disabled="true" type="select" di maxlength="200"></u-input></view>
				</view>
				<view class="cu-form-group ">
					<view class="title">件数：</view>
					<view style="flex: 1;"> <u-input @input="qtyChange($event,item,index)" placeholder="请输入"
							v-model="item.qty" type="digit" di maxlength="200"></u-input></view>
				</view>
			</view>

		</view>
		<view style="height: 70px;"></view>
		<view class=" flex cu-bar tabbar bg-white foot cu-modal-footer">
			<button class="cu-btn  bg-confirm lg  " @click="submit">保存</button>
			<button class="cu-btn  lines-red lg margin-left" @click="cancel">关闭</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carType: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				model: {
				},
				//主表id
				query: {
					id: '',
				},
				//子表id
				querys: {
					id: '',
				},
				children: [],
				carVenSelectList: [],
				pickerTime: false, //控制日期显示
			}
		},
		onLoad(params) {
			if (params.id) {
				this.query.id = params.id
				this.loadList();
			}
			uni.$on('refreshData', () => {
				this.loadList();
			})
			uni.$on('hwObjs', (data) => {
				console.log(data, 111111111);
				this.children[data.index] = {
					...this.children[data.index],
					...data,
					ibatch: data.cbatch,
					cposition: data.cposCode,
				}
				this.$forceUpdate()
			})
		},
		onShow() {},
		onReady() {
			// 运输单位数据
			this.$u.api.carVen.treeData().then(res => {
				this.carVenSelectList = res;
			});
		},
		methods: {
			planWeightChange(e) {
				if (this.carType == 1) {
					if (e > 0) {
						e = -e
					}
				} else {
					if (e < 0) {
						e = -e
					}
				}
				this.model.planWeight = e
				this.$forceUpdate()
			},
			hwxz(item, index) {
				console.log(item, index);
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/hwXz?cwhCode=' + this.model.cwhcode + '&cinvCode=' + this.model.invCode +
						'&autoid=' + this.model.autoid + '&index=' + index,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {

						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			qtyChange(e, item, inde) {
				if (this.carType == 1) {
					if (e > 0) {
						e = -e
					}
				} else {
					if (e < 0) {
						e = -e
					}
				}
				item.qty = e
				let z = item.zbl ? item.zbl : 1

				item.qrWeight = item.qty * z

				let qrzl = 0;
				this.children.forEach((q) => {
					if(q.status !=1){
						qrzl += q.qrWeight ? Number(q.qrWeight) : 0;
					}
					
				});
				this.model.qrWeight = qrzl
				this.$forceUpdate()

			},
			qrWeightChange(e, item, inde) {
				console.log(e, inde, '==============');
				if (this.carType == 1) {
					if (e > 0) {
						e = -e
					}
				} else {
					if (e < 0) {
						e = -e
					}
				}
				item.qrWeight = e
				let z = item.zbl ? item.zbl : 1
				item.qty = (item.qrWeight / z).toFixed(4)

				let qrzl = 0;
				this.children.forEach((q) => {
					if(q.status !=1){
						qrzl += q.qrWeight ? Number(q.qrWeight) : 0;
					}
				});
				this.model.qrWeight = qrzl
				this.$forceUpdate()

			},
			cancel() {
				// uni.$emit('refreshData');
				uni.navigateBack({
					delta: 1,
				})
			},
			toFindDetail(model) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/fhDetailList?hid=' + model.id,
				})
			},
			toAddDetail(model) {
				const that = this
				uni.navigateTo({
					url: '/pages/mf/fh/fhHwAdd?hid=' + model.id,
				})
			},
			delDetail(item) {
				let that = this
				uni.showModal({
					title: '删除提示',
					content: '是否删除此货位信息？',
					confirmColor: '#F54E40',
					success: (res) => {
						if (!res.confirm) {
							return false;
						}
						item.status = '1'
						
						let qrzl = 0;
						that.children.forEach((q) => {
							if(q.status !=1){
								qrzl += q.qrWeight ? Number(q.qrWeight) : 0;
							}
						});
						that.model.qrWeight = qrzl
						that.$forceUpdate()
					}
				})
			},
			loadList() {
				this.$u.api.mffh.mfCarplanFhCForm(this.query).then(res => {
					this.carType = res.carType
					this.model = res.mfCarplanFhC;
					this.children = this.model.mfCarplanFhBList;
				})
			},
			GoaddChild() {
				this.children.push({
					id: '',
					isNewRecord: true,
					zbl: 1
				})
			},
			timeConfirm(e) {
				this.model.planDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e
					.second;
			},
			submit(data, callback) {
				if (this.model.planWeight == null || this.model.planWeight == '') {
;					this.$refs.jsError.showError('','请正确填入计划发货重量！','error');
					return;
				}
				let flag = true;
				let flag2 = true;
				let index = '';
				let num = '';
				
				this.children.forEach((item,i)=>{
					let qrWeight =  Math.abs(item.qrWeight)
					if(item.iquantity && qrWeight > item.iquantity &&  item.status !=1){
						index = i + 1;
						num = item.iquantity
						flag = false
					}
					
					if(!item.qrWeight &&  item.status !=1){
						flag2 = false
					}
				})
				if(!flag2 ){
					this.$refs.jsError.showError('','请正确填入计划发货重量！','error');
					return;
				}
				if(!flag){
					this.$refs.jsError.showError('',`货位信息第${index}条确认发货重量不能大于${num}`,'error');
				}else{
					var data = {
						...this.model,
						mfCarplanFhBList:this.children,
					};
					this.$u.api.mffh.mfCarplanFhCsaveData(data).then(res => {
						console.log(res, "res")
						if (res.result == 'true') {
							this.$u.toast(res.message);
							uni.navigateBack({
								delta: 1,
							})
						}else{
							this.$refs.jsError.showError('',res.message,'error');
						}
					});
				}
			},
		}
	}
</script>
<style lang="less">
	.btn-plus {
		position: fixed;
		bottom: 260rpx;
		right: 40rpx;
		z-index: 2;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}

	.add {
		position: absolute;
		right: 130rpx;
		top: 0;
		margin-right: 0;
	}

	.upload {
		position: absolute;
		right: 65rpx;
		top: 0;
		margin-right: 0;
	}

	.rights {
		position: absolute;
		/* display: inline-block; */
		right: 0;
		top: 0;
		margin-right: 0;
		/* width: 100%; */

	}

	.cu-bar {
		min-height: 80px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		background: #fff;
	}

	.cu-item {
		flex-wrap: wrap;
		padding: 8px 15px !important;
	}

	.title {
		width: 130px;
	}


	.button {
		font-size: 32rpx;
		color: #666666;
		line-height: 40rpx;
		padding: 12rpx 40rpx;
		margin-bottom: 20rpx;
		background: #e2e2e2;
		border-radius: 180rpx;
	}

	.button:hover {
		background: #3e97b0;
		color: #ffffff;
	}

	.cu-modal-search-title {
		margin: 32rpx 0rpx 20rpx 0rpx;
		text-align: left;
		font-size: 32rpx;
		color: #999999;
		line-height: 40rpx;
	}

	.cu-dialog {
		background: #ffffff;
	}

	.cu-modal-footer {
		padding: 32rpx 32rpx !important;
		width: 100%;

		.cu-btn {
			width: 50%;
		}
	}

	.bg-confirm {
		background: #3e97b0;
		color: #ffffff;
	}
</style>